<template>
  <div class="app-container">
    <div>
      机号：
      <el-input
        v-model="enterMachineNumber"
        placeholder="请输入机号"
        style="width:240px"/>&emsp;
      密码：
      <el-input
        v-model="enterPassword"
        placeholder="请输入密码"
        style="width:240px"/>&emsp;
      <el-button type="primary" @click="addOrUpdateMachine">增加</el-button>
    </div>
    <br/>
    <hr/>

    <div><br/>
      <div>
        在线：({{ onlineCount }})
        <label v-html="online_pass"/>
        不在线：({{ offlineCount }})
      </div>
    </div>
    <br/>
    <hr/>

    <div><br/>
      <el-table
        border
        :header-cell-style="{'color':'#2E53E9','font-size':'1.2em','font-weight':'900','background':'#F0FFF0'}"
        :data="machineList">
        <el-table-column
          prop="id" sortable
          label="No"
          min-width="20%"/>
        <el-table-column
          prop="machine_number" sortable
          label="机号"
          min-width="20%"/>
        <el-table-column
          prop="password" min-width="20%" sortable
          label="密钥"/>
        <el-table-column min-width="20%"
                         label="状态">
          <template slot-scope="scope">{{ scope.row.is_online === 0 ? '离线' : '在线' }}</template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          min-width="20%">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteMachine(scope.$index, machineList)"
              type="text"
              size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @current-change="getMachines"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next"
          :page-count="pageCount">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
  import axios from "axios";
  import G from "@/components/G";

  export default {
    data() {
      return {
        enterMachineNumber: '',
        enterPassword: '',


        online_pass: '&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;',
        onlineCount: 40,
        offlineCount: 50,


        pageSize: 50,
        currentPage: 1,
        machineList: [],
        pageCount: 0,
      }
    },
    methods: {
      addOrUpdateMachine() {
        let param = '&machine_number=' + this.enterMachineNumber
          + '&password=' + this.enterPassword;
        axios.post(G.host + 'addOrUpdateMachine', param).then(res => {
          this.getMachines(1);
        });
      },

      deleteMachine(index, dataList) {
        let param = '&id=' + dataList[index].id
        axios.post(G.host + 'deleteMachine', param).then(res => {
          dataList.splice(index, 1);
          this.getMachines(1);
        });
      },

      getMachines(page) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        this.currentPage = page;
        let param = '&page=' + this.currentPage
          + '&pageSize=' + this.pageSize;
        axios.post(G.host + 'getMachines', param).then(res => {
          console.log('res' + res.data)
          this.machineList = res.data.machineList
          this.offlineCount = res.data.offlineCount
          this.onlineCount = res.data.onlineCount
          this.pageCount = res.data.pageCount
          loading.close()
        });
      },
    },
    mounted() {
      this.getMachines(1);
    }
  }
</script>
